<template>
  <div class="follow">
      <view class="item" v-for="(item,index) in list" :key="index" @click="$gotoUrl('/pages/community/community-item?id='+item.id)">
          <view class="user" >
              <img :src="item.ownerUser.portrait" alt="">
              <span class="name">{{item.ownerUser.name}}</span>
              <span class="time">{{$getDateDiff(item.updatedTime)}}发布于{{item.location}}</span>
          </view>
          <view class="content">
              <view class="text">{{item.content}}</view>
              <view class="swiper-wrap">
                <swiper class="swiper" :current="item.current" @change="handleChange($event,item)">
                    <swiper-item v-for="(v,i) in item.imagesList" :key="i">
                        <image :src="v" alt="" mode="aspectFill"></image>
                    </swiper-item>
                    <swiper-item v-if="!item.imagesList.length">
                        <img src="/static/community/1.png" alt="">
                    </swiper-item>
                </swiper>
                <view class="dot">{{item.current + 1}} / {{item.imagesList.length || 1}}</view>
              </view>
              <view @click.stop>
                <view class="handler" >
                    <view class="lf">
                      <img src="/static/liveA.png" alt="" @click="handleRemoveLive(item)" v-if="item.userLikeStatus">
                      <img src="/static/live.png" alt="" @click="handleAddLive(item)" v-else>
            
                      <view class="text">{{item.likeNum}} 人很赞</view>
                    </view>
                    <view class="rg">
                        <view class="item">
                          <image src="/static/message.png" alt=""  mode="aspectFill"></image>
                          <span>{{item.commentNum}}</span>
                        </view>
                        <view class="item">
                          <image src="/static/community/share.png" alt=""></image>
                          <!-- <span>22</span> -->
                        </view>
                    </view>
                </view>
                <view class="location">
                  <img src="/static/community/location.png" alt="">
                  <!-- {{item.location}}· -->
                  <span class="text">{{ item.locationDescription }}</span>
                </view>
                <view class="comment" v-if="item.commentsList">
                    <view class="comment-item" v-for="(v,i) in item.commentsList.slice(0,2)" :key="i">
                        <span class="name">{{v.name}}：</span>
                        <span class="text">{{v.commentText}}</span>
                        <!-- <view class="comment-item comment-children" v-if="v.childrenList"  v-for="(v2,i2) in v.childrenList" :key="i2">
                            <span class="name">{{v2.name}} 回复 @{{ v.name }}：</span>
                            <span class="text">{{v2.commentText}}</span>
                        </view> -->
                    </view>
                    <!-- <view class="comment-item">
                        <span class="name">大蛇丸：</span>
                        <span class="text">火影就火影为什么放修猫图</span>
                    </view> -->
                </view>
                <view class="comment-input" >
                    <input type="text" placeholder="我来说两句..." v-model="comment" @confirm="handleAddComment(item)">
                </view>
              </view>
          </view>
      </view>
  </div>
</template>
<script>
import { addLive ,removeLive,AddComment} from '../community-server'
export default {
  props:{
    list:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      comment:'',
      defaultImg:'/static/community/1.png'
    }
  },
  methods: {
    async handleAddComment(item){
      if(!this.comment){
        uni.showToast({title:"评论不能为空",icon:"none"})
        return
      }
      await AddComment({
        commentText:this.comment,
        tagId:item.id,
        tagType:1
      })
      item.commentsList.push({name:"老湾",commentText:this.comment})
      this.comment=''
      uni.showToast({title:"评论成功"})
   
    },
   async handleAddLive(item){
      item.userLikeStatus=1
      item.likeNum+=1
      await addLive({tagId:item.id,tagType:1})
      uni.showToast({title:"点赞成功"})
    },
    async handleRemoveLive(item){
      item.userLikeStatus=0
      item.likeNum-=1
      await removeLive({tagId:item.id,tagType:1})
      uni.showToast({title:"取消点赞"})
    },
    handleChange(e,item){
      const current=e.detail.current
      item.current=current
    console.log("🚀 ~ handleChange ~ e:", current)

    }
  },
}
</script>
<style lang="scss" scoped>
    .follow{
      padding:20rpx 0;
      &>.item{
        margin-bottom: 60rpx;
        .user{
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          padding: 0 30rpx;
          img{
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            object-fit: cover;
          }
          .name{
            font-size: 28rpx;
            font-weight: 500;
            margin:  0 10rpx;
          }
          .time{
            font-size: 24rpx;
            font-weight: 400;
            color: #606266;
          }
        }
        .content{
          padding: 0 30rpx 0 100rpx;
          &>.text{
            font-size: 28rpx;
            margin-bottom: 20rpx;
          }
          .swiper-wrap{
            position: relative;
            .swiper{
              height: 824rpx;
            }
            image{
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 30rpx 30rpx 30rpx 30rpx;
            }
            .dot{
              position: absolute;
              right: 40rpx;
              top: 40rpx;
              width: 92rpx;
              height: 44rpx;
              line-height: 44rpx;
              background: rgba(16,16,17,0.4);
              border-radius: 46rpx 46rpx 46rpx 46rpx;
              font-size: 24rpx;
              color: #FFFFFF;
              text-align: center;
            }
          }
          .handler{
            margin: 22rpx 0;
            display: flex;
            justify-content: space-between;
            .lf{
              display: flex;
              align-items: center;
              &>img{
                width: 36rpx;
                height: 36rpx;
                margin-right: 12rpx;
              }
              .imgs{
                margin-left: 12rpx;
                img{
                  border-radius: 50%;
                  border: 2rpx solid #fff;
                  width: 32rpx;
                  height: 32rpx;
                }
                img+img{
                  margin-left: -10rpx;
                }
              }
            }
            .rg{
              display: flex;
              .item:first-child{
                margin-right: 44rpx;
              }
              .item{
                display: flex;
                align-items: center;

                image{
                  width: 36rpx;
                  height: 36rpx;
                  margin-right: 12rpx;
                }
              }
            }
          }
          .location{
            display: inline-flex;
            align-items: center;
            background: #F5F6F7;
            // height: 40rpx;
            padding: 10rpx 20rpx;
            border-radius: 100rpx;
            img{
              width: 24rpx;
              height: 24rpx;
              margin-right: 6rpx;
            }
            .text{
              flex: 1;
            }
          }
          .comment{
            margin: 20rpx 0;
            .comment-item{
              .text{
                color: #606266;
              }
              .comment-children{
                margin-left: 20rpx;
                margin-top: 10rpx;
                margin-bottom: 10rpx;
              }
            }
            .comment-item+.comment-item{
              margin-top: 10rpx;
            }
          }
          .comment-input{
            input{
              height: 80rpx;
              background: #F5F6F7;
              border-radius: 12rpx 12rpx 12rpx 12rpx;
              padding: 0 20rpx;
              font-size: 26rpx; 
              color: #606266;
            }
          }
        }
      }
    }
</style>